<template>
	<view>
		<!-- 待付款 展示卖家信息 待收款展示买家信息 -->
		<noData v-if="lists.length < 1" type="1" ndText="暂无数据"></noData>
		<view v-else class="paid-item" v-for="(item,index) in lists">
			<view class="paid-item-left">
				<view class="name">{{typeName == '待付款' ? item.seller_name :item.user_name}}</view>
				<view class="money"><text>￥</text>{{item.amount}}</view>
			</view>
			<view class="paid-item-right" v-show="typeName == '待付款'">
				<!-- 0=待支付,1=已支付,2=已确认 -->
				<view class="paid-item-right-1"  @click="navigator('/pages/me/collection/collection?title=查看收款信息'+'&item='+JSON.stringify(item) )">
					查看收款信息</view>
					<!-- && item.seller_id != 0 -->
				<view class="paid-item-right-2" v-show="item.status != 2 " @click="navigator('/pages/me/voucher/voucher?&bill_id='+item.id+'&titles='+'提交支付凭证'+'&payment_image='+item.payment_image)">提交支付凭证</view>
			</view>
			<view class="paid-item-right" v-show="type == 10">
				<view class="paid-item-right-1" @click="navigator('/pages/me/voucher/voucher?&bill_id='+item.id+'&titles='+'查看支付凭证'+'&seller_id='+item.seller_id+'&user_id='+item.user_id+'&payment_image='+item.payment_image)">
					查看支付凭证</view>
				<view class="paid-item-right-2" v-show="item.status == 1" @click="configGetmoney(item.id)">确认收款</view>
			</view>
		</view>
	</view>
</template>

<script>
	import noData from '@/components/no-data.vue';
	export default {
		components: {
			noData
		},
		data() {
			return {
				type: 20, //10=收款,20=付款
				typeName:'',
				lists: []
			}
		},
		onLoad(options) {
			this.type = options.paidTitle == '待收款' ? 10 : 20
			this.typeName = options.paidTitle
			uni.setNavigationBarTitle({
				title: options.paidTitle
			})
			this.init()
		},
		onShow() {
			this.init()
		},
		methods: {
			// 确认收款
			configGetmoney(bill_id){
				this.$http('other.confirmPay', {
					bill_id: bill_id
				}, '获取中...').then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon:'none',
							title:'收款成功'
						})
						this.init()
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
			},
			init() {
				this.$http('other.getMyBill', {
					type: this.type
				}, '获取中...').then(res => {
					if (res.code == 1) {
						this.lists = res.data
					}
				})
			},
			navigator(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F7F9;
		padding: 20rpx;
	}

	.paid-item {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;

		.paid-item-left {
			margin: 10rpx 0 0 10rpx;

			.name {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 20rpx;
			}

			.money {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;

				text {
					font-size: 22rpx;
				}
			}
		}

		.paid-item-right {
			display: flex;
			margin: 30rpx 10rpx 0 0;

			.paid-item-right-1 {
				width: 168rpx;
				height: 60rpx;
				background: #F6F6F6;
				border-radius: 50rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
				line-height: 60rpx;
				text-align: center;
				margin-right: 20rpx;
			}

			.paid-item-right-2 {
				width: 168rpx;
				height: 60rpx;
				background: linear-gradient(90deg, #6AAE2B 0%, #1B7E38 100%);
				border-radius: 50rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
</style>